<template>
  <a-modal
    :title="title"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="滤芯名称">
          <a-input placeholder="请输入滤芯名称" v-decorator="[ 'filterelementName',validatorRules.filterelementName]"/>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="可用天数">
          <a-input-number :min="1" placeholder="请输入可用天数" v-decorator="[ 'validity',validatorRules.validity]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="滤芯图片">
          <a-upload
            listType="picture-card"
            class="thumbnail-uploader"
            :showUploadList="false"
            :action="uploadAction"
            :data="{'isup':1}"
            :headers="headers"
            :beforeUpload="beforeUpload"
            @change="handleChange">
              <img  v-if="picUrl" :src="getThumbnailView()"  alt="缩略图" style="height:104px;max-width:300px"/>
              <div v-else>
                <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">上传</div>
              </div>
          </a-upload>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="最低更换天数">
          <a-input-number :min="1" placeholder="请输入最低更换天数" v-decorator="[ 'replacementDays',validatorRules.replacementDays]"/>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
  //导包
  import Vue from 'vue'
  import pick from 'lodash.pick'
  import moment from 'moment'
  import { httpAction } from '@/api/manage'
  import { filterObj } from '@/utils/util';
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import {filterelementadd,filterelementupd} from  '@/api/api'
    //对象内容
  export default {
    //对象名称
    name: "FilterelementModel",
    //申明导入的对象
    mixins:[JeecgListMixin],
    // components: {DictModal, DictItemList},
    //对象中的变量
    data() {
      return {
        description: '这是滤芯新增、修改页面',
        visible: false,
        uploadLoading:false,
        picUrl:"",
        model: {},
        headers:{},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {
            filterelementName: { rules: [{ required: true, message: '请输入滤芯名称!' }]},
            validity:{ rules: [{ required: true, message: '请输入可用天数!' }]},
            replacementDays:{ rules: [{ required: true, message: '请输入最低更换天数!' }]}
        },
        url: {
          fileUpload: window._CONFIG['domianURL']+"/sys/common/upload",//文件上传路径
          imgerver: window._CONFIG['domianURL']+"/sys/common/view",//显示图片路径
        },
      }
    },
    computed:{
      uploadAction:function () {
        return this.url.fileUpload;
      }
    },
    created () {

    },
    methods: {
     beforeUpload: function(file){
       //获得文件的类型
        var fileType = file.type;
        //判断获得的文件类型是否为图片类型，
        if(fileType.indexOf('image')<0){
          //warning:警告 err：报错  success：成功
          this.$message.warning('请上传图片');
          return false;
        }
        //TODO 验证文件大小
      },
      //上传的页面特效
       handleChange (info) {
        this.picUrl = "";
        if (info.file.status === 'uploading') {
          this.uploadLoading = true
          return
        }
        if (info.file.status === 'done') {
          var response = info.file.response;
          this.uploadLoading = false;
          console.log(response);
          //如果文件上传成功
          if(response.success){
            this.model.images = response.message;
            this.picUrl = "Has no pic url yet";
          }else{
            this.$message.warning(response.message);
          }
        }
      },
      getThumbnailView(){
        return this.url.imgerver +"/"+ this.model.images;
      },
      //对象中的方法
      add() {
        this.edit({})
      },
      edit(record) {
        if (record.id) {
          this.visiblekey = true
        } else {
          this.visiblekey = false
        }
        //重置表单
        this.form.resetFields()
        //当前选中行的内容存到model变量中
        this.model = Object.assign({}, record)
        this.visible = true
        this.$nextTick(() => {
            //为表单赋值
          this.form.setFieldsValue(pick(this.model, 'filterelementName', 'validity', 'replacementDays'))
        })
      },
        // 确定
        handleOk() {
            //this的作用域不能到表单的验证函数中
          const that = this;
          //提交表单前验证函数err：报错  values：表单中填写的所有的值
          this.form.validateFields((err, values) => {
              if(!err){
                  //打开提交动画
                   that.confirmLoading = true;
                   //把values中的值和this.model中的值进行拼接，成一个新的值叫formData
                   let formData = Object.assign(this.model, values)
                   let obj;
                   //判断提交的数据中是否存在Id，如果存在Id是修改，不存在id是新增
                   if(!this.model.filterelementId){
                       //如果不存在则是新增
                        obj=filterelementadd(formData);
                   }else{
                       //如果存在则是修改
                        obj=filterelementupd(formData);
                   }
                   //res提交成功之后的返回结果
                   obj.then((res) => {
                       //判断是否请求成功,成功返回true，失败返回falses
                       if(res.success){
                            that.$message.success(res.message)
                            //子页面返回ok
                            that.$emit('ok')
                       }else{
                            that.$message.success(res.message);
                       }
                   }).finally(() => {
                       //关闭提交动画
                        that.confirmLoading = false;
                        //关闭新增修改页面
                        that.close();
                    })
              }
          })
        },
            // 关闭
        handleCancel() {
            this.close();
        },
        close() {
            this.$emit('close');
            this.visible = false;
        }
    },
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>